<template>
  <div class="container">
    <div class="content">
      <el-row :gutter="0">
        <el-col :span="24">
          <span class="table-title">
            客户贷后风险
          </span>
        </el-col>
      </el-row>
      <div class="content-list">
        <el-row :gutter="0" class="risk-level-info">
          <el-col :span="8" class="content-charts">
            <div class="level-chart">
              <img v-if="this.riskGrade==0" src="../../../../../../../../assets/img/img_risk_level_0.jpg"/>
              <img v-if="this.riskGrade==1" src="../../../../../../../../assets/img/img_risk_level_1.jpg"/>
              <img v-if="this.riskGrade==2" src="../../../../../../../../assets/img/img_risk_level_2.jpg"/>
              <img v-if="this.riskGrade==3" src="../../../../../../../../assets/img/img_risk_level_3.jpg"/>
              <img v-if="this.riskGrade==4" src="../../../../../../../../assets/img/img_risk_level_4.jpg"/>
              <span>数据截止日期 : {{dataEndTime}}</span>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="content-charts-risk">
              <el-row :gutter="0">
                <el-col :span="13">
                  <div class="rating-title bolder cursor" @click="showOperateList = !showOperateList">
                    <i style="position:absolute;left:65px;top:40px" class="is-leaf" :class="{'el-icon-caret-right':!showOperateList,'el-icon-caret-bottom':showOperateList}"></i>
                    <span>
                      运营风险评级:</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <span @click="checkAnalysis(1)"
                        v-bind:class="{'color-green': this.riskOperate==0,'color-blue': this.riskOperate==1,'color-yellow': this.riskOperate==2 ,'color-orange':this.riskOperate==3, 'color-red':this.riskOperate==4}"
                        class="risk-total-level txt-large">{{riskNames[this.riskOperate]}}</span>
                </el-col>
              </el-row>
              <div v-if="showOperateList" class="sub-list">
                <el-row :gutter="0" v-for="(item,index) in operateList" :key="index">
                  <el-col :span="13">
                    <div class="rating-title">
                      <span>  {{item.riskType}}:</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                  <span @click="item.riskLevel==='企业工商信用'?checkAnalysis(1):checkAnalysis(5)"
                        v-bind:class="{'color-green': item.riskLevel=='正常','color-blue': item.riskLevel=='低',
                        'color-yellow': item.riskLevel=='中' ,'color-orange':item.riskLevel=='较高', 'color-red':item.riskLevel=='高'}"
                        class="risk-total-level txt-large">{{item.riskLevel}}</span>
                  </el-col>
                </el-row>
              </div>
              <el-row :gutter="0">
                <el-col :span="13">
                  <div class="rating-title bolder cursor" @click="showFinanceList = !showFinanceList">
                    <span>
                      <i class="is-leaf" :class="{'el-icon-caret-right':!showFinanceList,'el-icon-caret-bottom':showFinanceList}"></i>
                      财务风险评级:
                    </span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <span @click="checkAnalysis(2)"
                        v-bind:class="{'color-green': this.riskFinance==0,'color-blue': this.riskFinance==1,'color-yellow': this.riskFinance==2 ,'color-orange':this.riskFinance==3, 'color-red':this.riskFinance==4}"
                        class="risk-total-level txt-large">{{riskNames[this.riskFinance]}}</span>
                </el-col>
              </el-row>
              <div v-if="showFinanceList" class="sub-list">
                <el-row :gutter="0" v-for="(item,index) in financeList" :key="index">
                  <el-col :span="13">
                    <div class="rating-title">
                      <span>{{item.riskType}}:</span>
                    </div>
                  </el-col>
                  <el-col :span="8">
                  <span @click="checkAnalysis(2)"
                        v-bind:class="{'color-green': item.riskLevel=='正常','color-blue': item.riskLevel=='低',
                        'color-yellow': item.riskLevel=='中' ,'color-orange':item.riskLevel=='较高', 'color-red':item.riskLevel=='高'}"
                        class="risk-total-level txt-large">{{item.riskLevel}}</span>
                  </el-col>
                </el-row>
              </div>
              <el-row :gutter="0">
                <el-col :span="13">
                  <div class="rating-title bolder">
                    <span class="pdl">司法风险评级:</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <span @click="checkAnalysis(3)"
                        v-bind:class="{'color-green': this.riskJudicial==0,'color-blue': this.riskJudicial==1,'color-yellow': this.riskJudicial==2 ,'color-orange':this.riskJudicial==3, 'color-red':this.riskJudicial==4}"
                        class="risk-total-level txt-large">{{riskNames[this.riskJudicial]}}</span>
                </el-col>
              </el-row>
              <el-row :gutter="0">
                <el-col :span="13">
                  <div class="rating-title bolder">
                    <span class="pdl">行业风险评级:</span>
                  </div>
                </el-col>
                <el-col :span="8">
                  <span @click="checkAnalysis(3)"
                        v-bind:class="{'color-green': this.industry==0,'color-blue': this.industry==1,'color-yellow': this.industry==2 ,'color-orange':this.industry==3, 'color-red':this.industry==4}"
                        class="risk-total-level txt-large">{{riskNames[this.industry]}}</span>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="10" class="content-charts">
            <!-- <div ref="chart" style="width:100%; height:300%;"></div> -->
			<div ref="chart" style="width:600px; height:300%;"></div>
          </el-col>
        </el-row>





		 <el-table v-loading="reqLoading" :data="data" size="small" style="width: 100%;">
			    <el-table-column type="index" :index="indexMethod" label="序号" >
                </el-table-column>
				<!-- <el-table-column prop="id" label="序号"/> -->
                <el-table-column prop="date" label="日期" >
					<template slot-scope="scope">
					<span style="margin-left:-180px">{{ parseTime(scope.row.date) }}</span>
					</template>
				</el-table-column>

				<el-table-column prop="riskType" label="风险类型"  ></el-table-column>
				<el-table-column prop="riskLevel" label="风险等级" ></el-table-column>

        </el-table>

		  <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
        <!--<el-row :gutter="0">-->
          <!--<el-col :span="24">-->
            <!--<el-collapse-transition>-->
              <!--<div class="toggle-area" v-bind:class="{'toggle-area-height':custInfoIsOpen}">-->
                <!--<cust-risk-list v-bind:search-id="searchId"></cust-risk-list>-->
              <!--</div>-->
            <!--</el-collapse-transition>-->
            <!--<el-row>-->
              <!--<el-col :span="24" class="btn-toggle">-->
                <!--<div class="btn-collpose" @click="toggleCustInfo">-->
                  <!--<el-button type="text">-->
                    <!--<i class="el-icon-arrow-down" v-bind:class="{'el-icon-arrow-up':custInfoIsOpen}"></i>-->
                    <!--{{custInfoIsOpen?'收起':'展开'}}-->
                    <!--<i class="el-icon-arrow-down" v-bind:class="{'el-icon-arrow-up':custInfoIsOpen}"></i>-->
                  <!--</el-button>-->
                <!--</div>-->
              <!--</el-col>-->
            <!--</el-row>-->
          <!--</el-col>-->
        <!--</el-row>-->


        <!-- <cust-risk-list v-bind:search-id="searchId"></cust-risk-list> -->
      </div>
      <!-- <err-dialog ref="err_dlg" v-on:changeErrDialogShow="changeErrStatus($event)"></err-dialog> -->
    </div>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission'
import {loananalysis,risklist} from '@/api/custComBaseinfo'
import initData from '@/mixins/initData'
import initDict from '@/mixins/initDict'
import { parseTime } from '@/utils/index'
import echarts from 'echarts'
// import CustomerModel from 'models/customer'
//import ErrDialog from '../../../components/ErrDialog'
//import CustRiskList from './CustRiskList'
// import date from 'utils/date'
import date from '@/utils/date'

export default {
  mixins: [initData, initDict],
  data: function () {
    return {
      time: new Date(),
      tableData: [],
      isErr: false,
      err: [],
      custInfoIsOpen: false,
      riskJudicial: -1, // 司法风险
      riskOperate: -1, // 运营风险
      riskFinance: -1, // 财务风险
      riskGrade: -1, // 司法风险
      industry: -1, // 司法风险
      riskNames: ['正常', '低', '中', '较高', '高'],
      riskColors: ['color-green', 'color-blue', 'color-yellow', 'color-red', 'color-orange'],
      chart: null,
      operateList: [],
      financeList: [],
      showOperateList: false,
      showFinanceList: false,
      chartOption: {
        title: {},
        tooltip: {
          show: true
        },
        calculable: true,
        polar: [
          {
            name: {show: true, textStyle: {fontSize: 16, color: '#32cd32'}},
            indicator: [
              {text: '运营风险', max: 100},
              {text: '账户交易风险', max: 100},
              {text: '抵押品风险', max: 100},
              {text: '行业风险', max: 100},
              {text: '负责人风险', max: 100},
              {text: '司法风险', max: 100},
              {text: '财务风险', max: 100}
            ],
            center: ['50%', '55%'],
            radius: '80%' // 半径，可放大放小雷达图
          }
        ],
        series: [
          {
            name: '',
            type: 'radar', // 图表类型 radar为雷达图
            itemStyle: {
              normal: {
                lineStyle: {
                  color: '#87cefa',
                  width: 2
                },
                areaStyle: {
                  color: '#87cefa',
                  type: 'default'
                }
              }
            },
            symbolSize: 7,
            data: [{
              value: []
            }]
          }
        ]
      },
      dataEndTime: date(+new Date(), 'yyyy-MM-dd'),
	  custId: '',
	  

	  reqLoading:true,
	  reqForm:{
			page: 0, 
			size: 10,
			sort:'id,desc',
			custId:''
	  },
	  data:[],
     
    }
  },
  // 默认展示一个客户的贷后风险信息
  created () {
    setTimeout(() => {
		this.custId = sessionStorage.getItem('comCustId')
		this.reqForm.custId = sessionStorage.getItem('comCustId')
        this.getObjList()
	}, 500)





    // this.custId = this.$route.params.dataObj
    // if (this.custId == null || this.custId === '' || this.custId === 'undefined') {
    //   this.getMinId()
    // } else {
    //   this.getObjList()
	// }
	 
  },
//   props: ['searchId', 'custName'],
  methods: {
	  parseTime,
	  checkPermission,
      // 得到客户的贷后风险数据信息，绘制图表
    getObjList (opts) {
       	loananalysis(this.custId).then(res => {
					// this.total = res.totalElements
					// this.data = res.content
                    this.riskJudicial = res.judicial
					this.riskOperate = res.operate
					this.riskFinance = res.finance
					this.riskGrade = res.riskGrade
					this.industry = res.industry
					this.operateList = res.operateList
					this.financeList = res.financeList
					const legends = res.radar.map(item => ({
					name: item.name,
					nums: item.nums,
					riskGrade: item.riskGrade
					}))
					var value = []
					var indicator = []
					legends.forEach(item => {
					value.push(item.riskGrade + 1)
					indicator.push(item.name + ' : ' + this.riskNames[item.riskGrade])
					})
					this.chart.clear()
					this.createEcharts()
					this.chart.setOption({
					tooltip: {
						show: true,
						formatter: function (params, ticket, callback) {
						return indicator.join('</br>')
						}
					},
					polar: [
						{
						name: {show: true, textStyle: {fontSize: 16, color: '#32cd32'}},
						indicator: legends.map(item => {
							return {
							text: item.name,
							max: 5
							}
						}),
						center: ['50%', '55%'],
						radius: '80%' // 半径，可放大放小雷达图
						}
					],
					series: {
						type: 'radar', // 图表类型 radar为雷达图
						data: [{
						value: value
						}]
					}
					})



					setTimeout(() => {
						this.reqLoading = false
					}, 170)
		}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
		})





		    risklist(this.reqForm).then(res => {
                //    res.content.forEach((item, index) => {
                //         item.id = index + 1
				//    })

                   console.log('res.content', res.content)

					this.total = res.totalElements
					this.data = res.content
					setTimeout(() => {
						this.reqLoading = false
					}, 170)
				}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
				})

    },
    // 以第一次加载客户信息时，默认展示数据库中第一个客户的贷款风险信息
    async getMinId () {
      try {
        const mainId = await CustomerModel.getMinId()
        this.custId = mainId.custId
        try {
          this.getObjList()
        } catch (error) {
          console(error)
          // this.$refs.err_dlg.show(error)
        }
      } catch (error) {
        console(error)
        // this.$refs.err_dlg.show(error)
      }
    },
    // 根据风险详情进行界面的跳转
    // checkAnalysis (type) {
    //   if (type === 1) {
    //     this.$router.replace({
    //       name: 'video.analysis',
    //       params: {
    //         custId: this.custId,
    //         riskId: '',
    //         custName: this.custName,
    //         isTypicalTime: false
    //       }
    //     })
    //   } else if (type === 2) {
    //     this.$router.replace({
    //       name: 'report.analysis',
    //       params: {
    //         custId: this.custId,
    //         riskId: '',
    //         custName: this.custName
    //       }
    //     })
    //   } else if (type === 3) {
    //     this.$router.replace({
    //       name: 'case.analysis',
    //       params: {
    //         custId: this.custId,
    //         riskId: '',
    //         custName: this.custName
    //       }
    //     })
    //   } else if (type === 4) {
    //     this.$router.replace({
    //       name: 'industry.analysis',
    //       params: {
    //         custId: this.custId,
    //         riskId: '',
    //         custName: this.custName
    //       }
    //     })
    //   } else if (type === 5) {
    //     this.$router.replace({
    //       name: 'modification.detail',
    //       params: {
    //         custId: this.custId,
    //         riskId: '',
    //         custName: this.custName
    //       }
    //     })
    //   }
	// },
	

	indexMethod(index) {
        return index + 1;
    },
    // 错误提示信息
    changeErrStatus (data) {
      this.isErr = data
    },
    // 是否展开
    toggleCustInfo () {
      this.custInfoIsOpen = !this.custInfoIsOpen
    },
    // 创建Echarts图
    createEcharts () {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.chartOption)
      window.removeEventListener('resize', this.resizeChart)
      window.addEventListener('resize', this.resizeChart)
    },
    // Echarts图表自适应
    resizeChart () {
      if (this.chart) {
        this.chart.resize()
      }
    }
  },
  // 监视客户id,使界面上的客户信息，随着搜索框的客户的改变而改变
//   watch: {
//     searchId (newVal, oldVal) {
//       this.custId = newVal
//       this.getObjList()
//     }
//   },
  components: {
 //   ErrDialog,
 //   CustRiskList,
    date,
  //  CustomerModel
  },
  mounted () {
    this.createEcharts()
  },
  destroyed () {
    this.chart = null
  }
}
</script>

<style  scoped>
     .container{
       min-height:100%;
       background-color: white
	 }
    
    .content{
        min-width:1070px
	}
     
      .table-title{
        padding-left:24px;
		padding-top:16px;
		display:block;
		width:100%;
		height:57px;
		font-size:24px;
		font-weight:bolder;
		background-color:#ffffff;
		text-align:left;
		border-bottom: 2px solid #ce2731;
		color: #ce2731;
		line-height: 24px
	  }
        
    .content-list{
          font-size: 14px;
          line-height: 22px;
          text-align: left;
          width: 100%
	}
     
      .toggle-area{
           height:0;
           overflow:hidden
	  }
       
        .content{
           padding:20px
		}
          
      .toggle-area-height{
          height:auto
	  }
       
      .btn-toggle{
           text-align:center;
           height:30px;
           line-height:30px;
           background-color:white
	  }
        
        .btn-collpose{
			display:block;
           text-align:center
		}
         .btn-collpose i{
             margin-left:5px;
             margin-right:5px;
             width:15px;
             height:20px
		 }
      .content-charts-risk
        /*padding-top: 82px*/
      .rating-title{
          display:block;
          padding-left:24px;
          padding-top:15.5px;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.65);
          line-height: 22px;
          text-align: left
	  }
       
       .rating-title  span{
           line-height: 22px
		}
          /*display block*/
         
        .rating-title .pdl{
           padding-left:19px
		}
          
      .bolder{
         font-weight:bolder
	  }
       
      .cursor{
         cursor:pointer
	  }
      .sub-list .rating-title
        span{
             padding-left:18px
		}
      .risk-total-level{
            display:block;
			padding-top:16px;
			font-size: 16px;
			line-height: 22px;
			text-align: left;
			cursor:pointer
	  }
      .table{
           background-color:#fefefe;
           margin-top:20px
	  }
    .txt-large{
         font-size:16px;
        font-weight:bolder
	}
    .txt-larger{
         font-size:20px;
         font-weight:bolder
	}
    .risk-level-info{
        padding:20px 0;
        background-color :white
	}
      .content-charts
        .level-chart{
               width:100%;
               text-align:center
		}
        
          img{
                margin-top:20px;
                height:auto;
                width:60%
		  }
          span{
              display:block;
              padding-top:20px;
              width:100%;
              text-align:center;
              color:#828282
		  }
  .content-style {
    margin-top:20px;
  }
 
.color-green{
	color:green;
	margin-top:20px;
}
.color-blue{
	color:blue;
	margin-top:20px;
}
.color-yellow{
	color:yellow;
	margin-top:20px;
}
.color-orange{
	color:orange;
	margin-top:20px;
}
.color-red{
	color:red;
	margin-top:20px;
}

</style>

<!--
<style lang="stylus" scoped>
  .container
    min-height: 100%
    background-color: white
    .content
      min-width 1070px
      .table-title
        padding-left: 24px
        padding-top: 16px
        display block
        width 100%
        height 57px
        font-size 24px
        font-weight bolder
        background-color: #ffffff
        text-align left
        border-bottom: 2px solid #ce2731
        color: #ce2731
        line-height: 24px
    .content-list
      font-size: 14px
      line-height: 22px
      text-align: left
      width: 100%
      .toggle-area
        height 0
        overflow hidden
        .content
          padding 20px
      .toggle-area-height
        height auto
      .btn-toggle
        text-align center
        height 30px
        line-height 30px
        background-color white
        .btn-collpose
          display block
          text-align center
          i
            margin-left 5px
            margin-right 5px
            width 15px
            height 20px
      .content-charts-risk
        /*padding-top: 82px*/
      .rating-title
        display block
        padding-left 24px
        padding-top 15.5px
        font-size: 14px
        color: rgba(0, 0, 0, 0.65)
        line-height: 22px
        text-align: left
        span
          /*display block*/
          line-height: 22px
        .pdl
          padding-left 19px
      .bolder
        font-weight bolder
      .cursor
        cursor pointer
      .sub-list .rating-title
        span
          padding-left 18px
      .risk-total-level
        display block
        padding-top 16px
        font-size: 16px
        line-height: 22px
        text-align: left
        cursor pointer
      .table
        background-color #fefefe
        margin-top 20px
    .txt-large
      font-size 16px
      font-weight bolder
    .txt-larger
      font-size 20px
      font-weight bolder
    .risk-level-info
      padding 20px 0
      background-color white
      .content-charts
        .level-chart
          width 100%
          text-align center
          img
            margin-top 20px
            height auto
            width 60%
          span
            display block
            padding-top 20px
            width 100%
            text-align center
            color #828282

  .content-style {
    margin-top 20px
  }
</style> -->

<style scoped>
  .content .el-button:active,
  .content .el-button:focus,
  .content .el-button:hover {
    font-weight: bold;
    background-color: white;
  }

  .el-row .el-collapse-item__header {
    height: 30px;
    line-height: 30px;
    color: white;
    background-color: #cacaca;
    text-align: center;
  }

  .el-collapse-item__header.focusing:focus:not(:hover) {
    color: white
  }

  .el-button--text:focus, .el-button--text:hover,
  .el-button--text {
    padding: 0;
  }
</style>
